Angular Material এর MatTable কম্পোনেন্টের সাথে পেজিনেশন (Pagination) যোগ করা একটি সাধারণ এবং কার্যকরী উপায়, যা বড় ডাটাসেটকে পেজে ভাগ করে প্রদর্শন করতে সাহায্য করে। এটি ব্যবহারকারীদের জন্য একটি দ্রুত এবং সুশৃঙ্খল উপায়ে ডেটা দেখতে সাহায্য করে। Angular Material পেজিনেশন কম্পোনেন্ট MatPaginator ব্যবহার করে আপনি সহজেই টেবিলের ডাটাকে পেজিনেট করতে পারেন।

প্রাথমিক প্রস্তুতি

প্রথমে, আপনাকে MatPaginatorModule এবং MatTableModule ইমপোর্ট করতে হবে।

১. মডিউল ইমপোর্ট করা

আপনার app.module.ts ফাইলে নিচের মতো মডিউলগুলো ইমপোর্ট করুন:

import { MatPaginatorModule } from '@angular/material/paginator';
import { MatTableModule } from '@angular/material/table';

@NgModule({
  imports: [
    MatPaginatorModule,
    MatTableModule
  ]
})
export class AppModule { }

২. টেবিল এবং পেজিনেশন HTML তৈরি করা

এখন, আমরা MatTable এবং MatPaginator কম্পোনেন্ট ব্যবহার করে একটি টেবিল তৈরি করব, যা পেজিনেশন ফিচারও ধারণ করবে।

<table mat-table [dataSource]="dataSource">

  <!-- Column Definitions -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <ng-container matColumnDef="age">
    <th mat-header-cell *matHeaderCellDef> Age </th>
    <td mat-cell *matCellDef="let element"> {{element.age}} </td>
  </ng-container>

  <!-- Header and Row Definitions -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

<mat-paginator [length]="data.length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" (page)="pageEvent = $event">
</mat-paginator>

এখানে:

• mat-table: টেবিল কম্পোনেন্ট।
• matColumnDef: প্রতিটি কলামের জন্য ডিফাইনেশন।
• mat-paginator: পেজিনেশন কম্পোনেন্ট, যা পেজ সাইজ, পেজ সংখ্যার অপশন এবং পেজ পরিবর্তন ইভেন্ট নিয়ে কাজ করে।

৩. টেবিলের জন্য ডাটা এবং পেজিনেশন কনফিগার করা

এখন TypeScript ফাইলে ডাটা এবং পেজিনেশন সম্পর্কিত কনফিগারেশন করতে হবে।

import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { PageEvent } from '@angular/material/paginator';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  displayedColumns: string[] = ['name', 'age'];
  data = [
    { name: 'John', age: 25 },
    { name: 'Jane', age: 28 },
    { name: 'Jack', age: 32 },
    { name: 'Jill', age: 29 },
    { name: 'James', age: 35 },
    { name: 'Julia', age: 31 },
    { name: 'Joseph', age: 26 },
    { name: 'Jessica', age: 30 },
    { name: 'Jordan', age: 27 },
    { name: 'Joan', age: 33 }
  ];

  dataSource = new MatTableDataSource(this.data);

  pageSize = 5;  // প্রতিটি পেজে কতটি রেকর্ড দেখাতে হবে
  pageSizeOptions: number[] = [5, 10, 15];  // পেজ সাইজের অপশন
  length = this.data.length;  // মোট ডাটা কতটুকু
  pageEvent: PageEvent;

  constructor() {
    // টেবিলের ডাটা আপডেট করা, পেজ পরিবর্তন হলে
    this.dataSource.paginator = this.paginator;
  }

  // পেজ পরিবর্তন হলে ফাংশনটি কল হবে
  handlePageEvent(event: PageEvent) {
    this.pageEvent = event;
    this.dataSource.paginator.pageIndex = event.pageIndex;
    this.dataSource.paginator.pageSize = event.pageSize;
  }
}

এখানে:

• MatTableDataSource: এটি ডাটা টেবিলের ডেটার উৎস (data source) হিসেবে কাজ করে এবং পেজিনেশন সমর্থন করে।
• pageSize: প্রতিটি পেজে কতটি আইটেম দেখানো হবে।
• length: টেবিলের মোট ডাটা (যেমন, ১০টি রেকর্ড)।
• handlePageEvent: এটি পেজ পরিবর্তন হলে কল হবে এবং পেজের তথ্য আপডেট করবে।

৪. স্টাইলিং (CSS) কাস্টমাইজেশন

Angular Material ডিফল্ট স্টাইলিং সরবরাহ করে, তবে আপনি চাইলে কিছু কাস্টম স্টাইলিং যোগ করতে পারেন:

mat-table {
  width: 100%;
}

mat-paginator {
  margin-top: 20px;
}

এখানে mat-table এর প্রস্থ এবং mat-paginator এর জন্য মার্জিন সেট করা হয়েছে।

Angular Material টেবিল পেজিনেশন একটি কার্যকরী ফিচার যা বড় ডাটাসেটকে ছোট ছোট পেজে ভাগ করে দেখাতে সাহায্য করে। এটি MatTable কম্পোনেন্টের সাথে MatPaginator কম্পোনেন্ট ব্যবহার করে খুব সহজে ইমপ্লিমেন্ট করা যায়। পেজ সাইজ, পেজ অপশন এবং পেজ পরিবর্তন ইভেন্টের মাধ্যমে ডেটা নিয়ন্ত্রণ করা সম্ভব। Angular Material এর সাহায্যে আপনি একটি সুন্দর এবং কার্যকরী টেবিল তৈরি করতে পারবেন, যা ব্যবহারকারীদের জন্য আরও সুসংগত ও দ্রুত ডাটা প্রদর্শন নিশ্চিত করবে।